<template>
  <div class="blog-detail-page py-10">
    <div class="container max-w-4xl mx-auto">
      <!-- 文章存在时显示内容 -->
      <template v-if="post">
        <!-- 文章标题 -->
        <h1
          class="text-3xl md:text-4xl font-bold mb-6 text-text-primary animate__animated animate__fadeIn"
        >
          {{ post.title }}
        </h1>

        <!-- 文章元数据 -->
        <div
          class="flex flex-wrap items-center gap-4 mb-8 text-text-secondary animate__animated animate__fadeIn"
        >
          <div class="flex items-center">
            <n-avatar
              :src="post.author.avatar"
              round
              size="small"
              class="mr-2"
            />
            <span>{{ post.author.name }}</span>
          </div>
          <div class="flex items-center">
            <n-icon size="18" class="mr-1">
              <CalendarOutline />
            </n-icon>
            <span>{{ post.date }}</span>
          </div>
          <div class="flex items-center">
            <n-icon size="18" class="mr-1">
              <PricetagOutline />
            </n-icon>
            <span>{{ post.category }}</span>
          </div>
        </div>

        <!-- 文章封面图 -->
        <div
          class="mb-8 rounded-lg overflow-hidden animate__animated animate__fadeIn"
        >
          <img
            :src="post.image"
            :alt="post.title"
            class="w-full h-auto object-cover"
          />
        </div>

        <!-- 文章标签 -->
        <div class="mb-8 animate__animated animate__fadeIn">
          <n-space>
            <n-tag
              v-for="tag in post.tags"
              :key="tag"
              type="primary"
              size="small"
              round
            >
              {{ tag }}
            </n-tag>
          </n-space>
        </div>

        <!-- 文章内容 -->
        <div
          class="prose prose-lg max-w-none mb-12 text-text-primary animate__animated animate__fadeIn"
        >
          <!-- 这里只是示例内容，实际应用中应该使用 Markdown 渲染或富文本展示 -->
          <p class="mb-4">
            在当今快速发展的技术世界中，作为开发者，我们经常需要学习新的框架和工具来保持竞争力。Nuxt
            3 作为 Vue 3
            的强大框架，提供了许多令人印象深刻的特性，使构建现代化网站变得更加简单和高效。
          </p>
          <h2 class="text-2xl font-bold my-6">Nuxt 3 的核心优势</h2>
          <p class="mb-4">
            Nuxt 3 完全重写并基于 Vue
            3，采用了模块化的架构，使得应用更加轻量且性能更佳。让我们看看 Nuxt 3
            的主要特性：
          </p>
          <ul class="list-disc pl-6 mb-6">
            <li class="mb-2">基于 Vue 3 和 Vite，提供极快的开发体验</li>
            <li class="mb-2">混合渲染能力，支持 SSR、SSG 和 CSR</li>
            <li class="mb-2">自动导入组件和 Composition API</li>
            <li class="mb-2">强大的路由系统，支持动态路由和嵌套布局</li>
            <li class="mb-2">
              内置的数据获取工具，如 useFetch 和 useAsyncData
            </li>
          </ul>
          <h2 class="text-2xl font-bold my-6">开始使用 Nuxt 3</h2>
          <p class="mb-4">
            创建一个新的 Nuxt 3 项目非常简单。首先，运行以下命令：
          </p>
          <pre class="bg-gray-800 text-white p-4 rounded-lg mb-6 overflow-auto">
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev</pre
          >
          <p class="mb-4">
            这将创建一个基本的 Nuxt 3 项目并启动开发服务器。您可以访问
            http://localhost:3000 查看您的应用。
          </p>
          <h2 class="text-2xl font-bold my-6">自动导入功能</h2>
          <p class="mb-4">
            Nuxt 3 的一个亮点是其自动导入功能。您不再需要手动导入 Vue 的
            ref、computed 等
            API，甚至不需要导入自己创建的组件。这使得代码更加简洁：
          </p>
          <pre class="bg-gray-800 text-white p-4 rounded-lg mb-6 overflow-auto">
&lt;script setup&gt;
// 无需导入 ref 和 computed
const count = ref(0)
const doubled = computed(() => count.value * 2)

// 增加计数的函数
function increment() {
  count.value++
}
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;Count: \{\{ count \}\}&lt;/p&gt;
    &lt;p&gt;Doubled: \{\{ doubled \}\}&lt;/p&gt;
    &lt;button @click="increment"&gt;Increment&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;</pre
          >
          <h2 class="text-2xl font-bold my-6">总结</h2>
          <p>
            Nuxt 3 提供了优秀的开发体验和强大的功能，使其成为构建现代 Web
            应用的绝佳选择。通过学习和掌握 Nuxt
            3，您可以更高效地开发出高性能、可维护的应用程序。
          </p>
        </div>

        <!-- 分享按钮 -->
        <div class="mb-10 animate__animated animate__fadeIn">
          <h3 class="text-xl font-semibold mb-4 text-text-primary">
            分享这篇文章
          </h3>
          <div class="flex gap-3">
            <n-button circle tertiary>
              <n-icon>
                <LogoTwitter />
              </n-icon>
            </n-button>
            <n-button circle tertiary>
              <n-icon>
                <LogoFacebook />
              </n-icon>
            </n-button>
            <n-button circle tertiary>
              <n-icon>
                <LogoLinkedin />
              </n-icon>
            </n-button>
            <n-button circle tertiary>
              <n-icon>
                <MailOutline />
              </n-icon>
            </n-button>
          </div>
        </div>

        <!-- 相关文章 -->
        <section class="mb-10 animate__animated animate__fadeIn">
          <h3 class="text-xl font-semibold mb-6 text-text-primary">相关文章</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div
              v-for="relatedPost in relatedPosts"
              :key="relatedPost.id"
              class="card overflow-hidden group"
            >
              <div class="flex h-full">
                <div class="relative w-1/3 overflow-hidden">
                  <img
                    :src="relatedPost.image"
                    :alt="relatedPost.title"
                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                </div>
                <div class="p-4 w-2/3">
                  <div
                    class="flex items-center text-text-secondary text-xs mb-1"
                  >
                    <span>{{ relatedPost.date }}</span>
                  </div>
                  <h4
                    class="text-base font-semibold mb-2 text-text-primary hover:text-primary transition-colors line-clamp-2"
                  >
                    <NuxtLink :to="`/blog/${relatedPost.id}`">{{
                      relatedPost.title
                    }}</NuxtLink>
                  </h4>
                  <NuxtLink
                    :to="`/blog/${relatedPost.id}`"
                    class="text-primary text-sm flex items-center hover:underline"
                  >
                    阅读更多
                    <n-icon class="ml-1" size="14">
                      <ArrowForwardOutline />
                    </n-icon>
                  </NuxtLink>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 返回按钮 -->
        <div class="animate__animated animate__fadeIn">
          <NuxtLink
            to="/blog"
            class="inline-flex items-center text-primary hover:underline"
          >
            <n-icon class="mr-1">
              <ArrowBackOutline />
            </n-icon>
            返回博客列表
          </NuxtLink>
        </div>
      </template>

      <!-- 文章不存在时显示错误 -->
      <div v-else class="text-center py-20 animate__animated animate__fadeIn">
        <n-result
          status="404"
          title="文章不存在"
          description="抱歉，您查找的文章不存在或已被删除"
        >
          <template #footer>
            <n-button type="primary" @click="navigateTo('/blog')">
              返回博客列表
            </n-button>
          </template>
        </n-result>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  CalendarOutline,
  PricetagOutline,
  MailOutline,
  LogoTwitter,
  LogoFacebook,
  LogoLinkedin,
  ArrowForwardOutline,
  ArrowBackOutline,
} from "@vicons/ionicons5";

// 获取路由参数
const route = useRoute();
const postId = parseInt(route.params.id as string);

// 模拟博客文章数据 (实际应用中应该通过API获取)
const blogPosts = [
  {
    id: 1,
    title: "如何使用Nuxt 3构建现代化网站",
    excerpt:
      "探索Nuxt 3的新特性和使用技巧，学习如何快速构建高效的现代化网站。本文将详细介绍Nuxt 3的核心概念和最佳实践。",
    content: "这里是文章的详细内容...",
    date: "2024-03-20",
    category: "前端开发",
    categoryValue: "frontend",
    image: "https://picsum.photos/seed/post1/1200/600",
    tags: ["Nuxt", "Vue", "JavaScript", "Web开发"],
    author: {
      name: "小明",
      avatar: "https://picsum.photos/seed/author1/100/100",
    },
  },
  {
    id: 2,
    title: "UnoCSS：下一代实用工具优先的CSS框架",
    excerpt:
      "深入了解UnoCSS的优势和使用方法，以及如何在项目中充分利用它的强大功能，提高开发效率。",
    content: "这里是文章的详细内容...",
    date: "2024-03-15",
    category: "前端开发",
    categoryValue: "frontend",
    image: "https://picsum.photos/seed/post2/1200/600",
    tags: ["CSS", "UnoCSS", "TailwindCSS", "前端"],
    author: {
      name: "小明",
      avatar: "https://picsum.photos/seed/author1/100/100",
    },
  },
  {
    id: 3,
    title: "Naive UI：Vue 3的高质量组件库",
    excerpt:
      "探讨Naive UI的特点和使用体验，以及如何在Vue 3项目中高效地使用它，打造美观的用户界面。",
    content: "这里是文章的详细内容...",
    date: "2024-03-10",
    category: "UI/UX设计",
    categoryValue: "design",
    image: "https://picsum.photos/seed/post3/1200/600",
    tags: ["Vue", "UI组件", "Naive UI", "前端"],
    author: {
      name: "小明",
      avatar: "https://picsum.photos/seed/author1/100/100",
    },
  },
  // ... 其他文章
];

// 获取当前文章
const post = computed(() => {
  return blogPosts.find((p) => p.id === postId) || null;
});

// 相关文章（同类别的其他文章，最多3篇）
const relatedPosts = computed(() => {
  if (!post.value) return [];

  return blogPosts
    .filter(
      (p) => p.id !== postId && p.categoryValue === post.value?.categoryValue
    )
    .slice(0, 3);
});

// 设置页面标题
useHead(() => ({
  title: post.value
    ? `${post.value.title} - 我的博客`
    : "文章不存在 - 我的博客",
  meta: [
    {
      name: "description",
      content: post.value?.excerpt || "文章不存在",
    },
  ],
}));

// 定义页面过渡
definePageMeta({
  pageTransition: {
    name: "slide-left",
    mode: "out-in",
  },
});
</script>

<style>
/* 添加 Markdown 内容样式 */
.prose {
  @apply text-text-primary;
}

.prose h2 {
  @apply text-text-primary border-b border-gray-200 pb-2;
}

.prose p {
  @apply text-text-secondary;
}

.prose pre {
  @apply bg-bg-secondary dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
}

.prose ul li {
  @apply text-text-secondary;
}

/* 使内容适应暗黑模式 */
.dark .prose {
  @apply text-gray-200;
}

.dark .prose h2 {
  @apply border-gray-700;
}

.dark .prose p,
.dark .prose ul li {
  @apply text-gray-300;
}
</style>
